<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
<script type="text/javascript" src="./lib/cuon-utils.js"></script>
<script type="text/javascript" src="./lib/webgl-debug.js"></script>
<script type="text/javascript" src="./lib/webgl-utils.js"></script>
<script type="text/javascript">
	var Geometry1 = new Object();
	Geometry1.vertices = new Float32Array([
   // Vertex coordinates and color(RGBA)
    -5.0,0.0,-5.0,  1.0,0.0,0.0,//0
    -5.0,0.0,5.0,  0.0,1,0.0,//1
    5.0,0.0,-5.0,  0.0,0.0,1.0,//2
    5.0,0.0,5.0,  1.0,0.0,0.0,//3
    -5.0,5,-5.0,  0.0,1.0,0.0,//4
    -5.0,5.0,5.0,  0.0,0.0,1.0,//5
    5.0,5.0,-5.0,  1.0,1.0,0.0,//6
    5.0,5.0,5.0,  1.0,0.0,1.0//7
      ]);

	Geometry1.indexs = new Uint8Array([
    0,1,2,
    2,1,3,//下

    4,5,6,//上
    6,5,7,

    4,0,6,//后
    6,0,2,
    
    5,1,7,//前
    7,1,3,

    0,1,5,//坐
    5,0,4,

    2,6,7,//右
    7,2,3
      ]);

// Geometry1.vertices = new Float32Array([
//     // Vertex coordinates and color
//      10.0,  10.0,  10.0,     1.0,  1.0,  1.0,  // v0 White
//     -10.0,  10.0,  10.0,     1.0,  0.0,  1.0,  // v1 Magenta
//     -10.0, -10.0,  10.0,     1.0,  0.0,  0.0,  // v2 Red
//      10.0, -10.0,  10.0,     1.0,  1.0,  0.0,  // v3 Yellow
//      10.0, -10.0, -10.0,     0.0,  1.0,  0.0,  // v4 Green
//      10.0,  10.0, -10.0,     0.0,  1.0,  1.0,  // v5 Cyan
//     -10.0,  10.0, -10.0,     0.0,  0.0,  1.0,  // v6 Blue
//     -10.0, -10.0, -10.0,     0.0,  0.0,  0.0   // v7 Black
//   ]);

  // Indices of the vertices
// Geometry1.indexs = new Uint8Array([
//     0, 1, 2,   0, 2, 3,    // front
//     0, 3, 4,   0, 4, 5,    // right
//     0, 5, 6,   0, 6, 1,    // up
//     1, 6, 7,   1, 7, 2,    // left
//     7, 4, 3,   7, 3, 2,    // down
//     4, 7, 6,   4, 6, 5     // back
//  ]);



	Geometry1.VSHADER_SOURCE =
	"attribute vec4 a_Position;"+
	"attribute vec4 a_Color;"+
	"uniform mat4 u_mat4;"+
	"varying vec4 v_Color;"+
	"void main(){"+
	"gl_Position = u_mat4 * a_Position;"+
	"v_Color = a_Color;"+
	"}";

	Geometry1.FSHADER_SOURCE =
	"precision mediump float;"+
	"varying vec4 v_Color;"+
	"void main(){"+
	"gl_FragColor = v_Color;"+
	"}";
	 Geometry1.initVertexBuffers = function(gl){
		this.vertexBuffer = gl.createBuffer();
		if(!this.vertexBuffer){
			alert('createBuffer gvertexBuffer fail');
			return false;
		}
		this.indexBuffer = gl.createBuffer();
		if(!this.indexBuffer){
			alert('createBuffer indexBuffer fail');
			return false;
		}
		return true
	}


    Geometry1.initShader = function(gl){
    	this.program = createProgram(gl,this.VSHADER_SOURCE,this.FSHADER_SOURCE);
		if(!this.program){
			alert('Geometry1 createProgram fail')
			return;
		}
		gl.useProgram(this.program);
    	this.a_mat = gl.getUniformLocation(this.program,'u_mat4');	
		if (!this.a_mat) {
			alert('uniform u_mat4 fail');
			return false;
		}
    	this.a_Position = gl.getAttribLocation(this.program,'a_Position');
		if(this.a_Position <0){
			alert('a_PointSize fail')
			return false;
		}
		this.a_Color = gl.getAttribLocation(this.program,'a_Color');
		if(this.a_Color <0){
			alert('a_Color fail');
			return false;
		}

		gl.enableVertexAttribArray(this.a_Position);
		gl.enableVertexAttribArray(this.a_Color);
		
		return true;
    }

  

	Geometry1.mat = new Matrix4();


	Geometry1.draw = function(gl,frames){
		gl.bindBuffer(gl.ARRAY_BUFFER,this.vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER,this.vertices,gl.STATIC_DRAW);

		gl.enableVertexAttribArray(this.a_Position);
		gl.enableVertexAttribArray(this.a_Color);
		
		var Fsize = this.vertices.BYTES_PER_ELEMENT;
		gl.vertexAttribPointer(this.a_Position,3,gl.FLOAT,false,Fsize*6,0);
		gl.vertexAttribPointer(this.a_Color,3,gl.FLOAT,false,Fsize*6,Fsize*3);

		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.indexBuffer);
		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,this.indexs,gl.STATIC_DRAW);

		//this.mat.setPerspective(30, 1, 1, 100);
  		//this.mat.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
  		
		this.mat.setPerspective(45,1,1,100);
		this.mat.lookAt(20,20,20,0,0,0,0,1,0);
		this.mat.rotate(frames%360,frames%2,frames%2,frames%2)

		gl.uniformMatrix4fv(this.a_mat,false,this.mat.elements);
		
		//gl.drawArrays(gl.TRIANGLES,0,Geometry1.vertices.length /6);
		gl.drawElements(gl.TRIANGLES,Geometry1.indexs.length,gl.UNSIGNED_BYTE,0);

		gl.bindBuffer(gl.ARRAY_BUFFER,null);
	}

    var canvas = null;
	function start () {
		canvas = document.getElementById("webgl");
		var gl = getWebGLContext(canvas);
		if (!gl){
			alert('gl fail');
			return;
		}

		if(!Geometry1.initShader(gl)){
			alert('Geometry1 initShaderParm fail')
			return;
		}

		if (!Geometry1.initVertexBuffers(gl)){
			alert('Geometry1 initVertexBuffers fail');
			return;
		}

		var frames = 0
		function renderer(){
			frames++;
			render(gl,frames);
			requestAnimationFrame(renderer)
		}
		renderer();
	}

	function render(gl,frames){
		gl.clearColor(0,0,0,1);
		gl.clear(gl.COLOR_BUFFER_BIT);
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
		gl.enable(gl.DEPTH_TEST);
		Geometry1.draw(gl,frames);		
	}



</script>
<body onload="start()">
<canvas id="webgl" width="500" height="500"></canvas>
</body>
</html>